import React from "react";
import {
  Card,
  Row,
  Col,
  Typography,
  Input,
  Select,
  DatePicker,
  Button,
  Tabs,
  List,
  InputNumber,
  Space,
  Tag,
  Divider,
} from "antd";
import dayjs from "dayjs";
import styles from "./index.module.less";

const { Title, Text } = Typography;
const { TextArea } = Input;
const { RangePicker } = DatePicker;

const TaskCardDetail: React.FC = () => {
  const items = [
    {
      key: "1",
      label: "报工记录 (0h)",
      children: null,
    },
    {
      key: "2",
      label: "操作记录",
      children: null,
    },
    {
      key: "3",
      label: "代码提交",
      children: null,
    },
    {
      key: "4",
      label: "关联任务卡 (0)",
      children: null,
    },
  ];

  const subTaskList = [
    "#7161 【后端】自动化规则引擎执行架子搭建（0） 开发完成 04-18 22h 胡剑波",
  ];

  return (
    <div className={styles.container} data-oid="u4qvti7">
      <div className={styles.header} data-oid=":uqxbs5">
        <Title level={2} data-oid="03ydjhs">
          任务卡详情 Z991749-7089 复制
        </Title>
        <Tabs defaultActiveKey="1" items={items} data-oid="s-xb:e4" />
      </div>

      <Row gutter={[20, 20]} data-oid="17h.c__">
        <Col span={12} data-oid="5t0z3zr">
          <Card data-oid="75j9rna">
            <div className={styles.formGroup} data-oid="sf_1rbn">
              <Text strong data-oid="0opgdaf">
                特性功能
              </Text>
              <Input
                value="创建于 2025-04-03 17:43 更新于 2025-04-27 11:09"
                placeholder="特性功能"
                readOnly
                data-oid="qd1fd94"
              />
            </div>

            <div className={styles.formGroup} data-oid="5d7jm2i">
              <Text strong data-oid="4dwwc4m">
                访问"自动化规则"页面
              </Text>
              <TextArea
                placeholder="访问自动化规则页面"
                autoSize={{ minRows: 3, maxRows: 6 }}
                data-oid="m14gfs7"
              />
            </div>

            <div className={styles.formGroup} data-oid="u85oi1j">
              <Text strong data-oid="y:zbtr-">
                关联特性卡
              </Text>
              <Input
                value="#7084 支持自动化规则配置能力"
                placeholder="关联特性卡"
                readOnly
                data-oid="ic0lxlr"
              />
            </div>

            <div className={styles.formGroup} data-oid="za8autq">
              <Text strong data-oid="hlxk.ya">
                任务卡标签
              </Text>
              <Input placeholder="点击添加标签" data-oid="jaf-bdr" />
            </div>

            <div className={styles.formGroup} data-oid="zcjn7_4">
              <Text strong data-oid="7y0qt7h">
                功能详情
              </Text>
              <TextArea
                placeholder="功能详情"
                autoSize={{ minRows: 3, maxRows: 6 }}
                data-oid="0yd68w3"
              />
            </div>

            <div className={styles.formGroup} data-oid="zakm-d7">
              <Text strong data-oid="9iq_w_0">
                任务卡描述 ①
              </Text>
              <TextArea
                placeholder="任务卡描述 ①"
                autoSize={{ minRows: 3, maxRows: 6 }}
                data-oid="k0t0_nn"
              />
            </div>
          </Card>
        </Col>

        <Col span={12} data-oid="5q5djuo">
          <Card data-oid="potas5u">
            <div className={styles.formGroup} data-oid="-z0_:j2">
              <Text strong data-oid="oqqp3o7">
                所在列
              </Text>
              <Select
                defaultValue="待测试"
                style={{ width: "100%" }}
                options={[{ value: "待测试", label: "待测试" }]}
                data-oid="427izd7"
              />
            </div>

            <div className={styles.formGroup} data-oid="h8am19-">
              <Text strong data-oid="xy6w1_t">
                经办人
              </Text>
              <Input
                value="杨东卫/IT01..."
                placeholder="经办人"
                readOnly
                data-oid="phl6np3"
              />
            </div>

            <div className={styles.formGroup} data-oid="kze5xwz">
              <Text strong data-oid="sapnh0p">
                参与人
              </Text>
              <Input placeholder="请输入关键字" data-oid="k2vr19t" />
            </div>

            <div className={styles.formGroup} data-oid="_z67wt5">
              <Text strong data-oid="y975-cq">
                所属项目/泳道
              </Text>
              <Select
                defaultValue="[T25GU761]自动化规则建设一期"
                style={{ width: "100%" }}
                options={[
                  {
                    value: "[T25GU761]自动化规则建设一期",
                    label: "[T25GU761]自动化规则建设一期",
                  },
                ]}
                data-oid="9.g4q_j"
              />
            </div>

            <div className={styles.formGroup} data-oid="ivolxe9">
              <Text strong data-oid="x7-608a">
                所属批次
              </Text>
              <Input
                value="批次1 (04.08~...)"
                placeholder="所属批次"
                readOnly
                data-oid="3z:0vgh"
              />
            </div>

            <div className={styles.formGroup} data-oid="3nw5f1-">
              <Text strong data-oid="6xl92al">
                进度
              </Text>
              <InputNumber
                defaultValue={100}
                style={{ width: "100%" }}
                min={0}
                max={100}
                formatter={(value) => `${value}%`}
                parser={(value) => {
                  const num = Number(value?.replace("%", "")) || 0;
                  return num === 100 ? 100 : 0;
                }}
                data-oid="25mafg6"
              />
            </div>

            <div className={styles.formGroup} data-oid="gpep6do">
              <Text strong data-oid="ovu8is4">
                人天
              </Text>
              <Input
                value="子卡人天求和"
                placeholder="人天"
                readOnly
                data-oid="9qm4r40"
              />
            </div>

            <div className={styles.formGroup} data-oid="jc4v0l-">
              <Text strong data-oid="c7twxpk">
                优先级
              </Text>
              <Select
                defaultValue="高"
                style={{ width: "100%" }}
                options={[
                  { value: "高", label: "高" },
                  { value: "中", label: "中" },
                  { value: "低", label: "低" },
                ]}
                data-oid="l_0a5uj"
              />
            </div>

            <div className={styles.formGroup} data-oid="0:w6bxt">
              <Text strong data-oid="q1fvii0">
                计划时间
              </Text>
              <RangePicker
                style={{ width: "100%" }}
                defaultValue={[dayjs("2025-04-27"), dayjs("2025-05-07")]}
                format="YYYY-MM-DD"
                data-oid="m3w3j_6"
              />
            </div>

            <Divider data-oid="jq1:68h" />

            <div className={styles.formGroup} data-oid="_hzn_2.">
              <Space align="center" data-oid="ku8qt3.">
                <Text strong data-oid="lb7d18d">
                  子任务卡
                </Text>
                <Button type="primary" size="small" data-oid="va9t--d">
                  +
                </Button>
              </Space>
            </div>

            <div className={styles.formGroup} data-oid="5on6mt.">
              <Text strong data-oid="chqjt17">
                子任务卡列表
              </Text>
              <List
                dataSource={subTaskList}
                renderItem={(item) => (
                  <List.Item data-oid="a_08i:z">
                    <Text data-oid="23:uvlk">{item}</Text>
                  </List.Item>
                )}
                split={false}
                data-oid="jgd8lj0"
              />
            </div>
          </Card>
        </Col>
      </Row>

      <div className={styles.footer} data-oid="66s6zyx">
        <Button data-oid="j:n2riy">取消</Button>
        <Button type="primary" data-oid="7y.di1k">
          确定
        </Button>
      </div>
    </div>
  );
};

export default TaskCardDetail;
